﻿<template>
    <l-layout class="l-tab-page">
        
        <l-panel>
            <template #toolLeft >
                <l-query2 :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                    <template #f_ApplyDate >
                        <l-date format="yyyy-MM-dd HH:mm:ss"  dateType="datetimerange" v-model="queryData.f_ApplyDate" :placeholder="$t('please select')" >
                        </l-date>
                    </template>
                    <template #f_PurchaseNo >
                        <el-input v-model="queryData.f_PurchaseNo" :placeholder="$t('please enter')"></el-input>
                    </template>
                    <template #f_Theme >
                        <el-input v-model="queryData.f_Theme" :placeholder="$t('please enter')"></el-input>
                    </template>
                    <template #f_PurchaseType >
                        <l-select :options="f_PurchaseTypeOptions" v-model="queryData.f_PurchaseType" ></l-select>
                    </template>
                    <template #f_Appler >
                        <l-user-select v-model="queryData.f_Appler" ></l-user-select>
                    </template>
                </l-query2>
            </template>
            <template #toolRight >
                <l-tool-btns  @click="handleAdd()" >
                </l-tool-btns>
            </template>
            <l-table ref="mainTable" 
                :loading="tableLoading" 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"
                >
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <!--表单-->
        <l-dialog :title="$t(formTitle)"
                  :visible.sync="formVisible"
                  :height="600"
                  :width="1024"
                  @ok="handleSave"
                  @close="handleCloseForm"
                  @opened="handleOpenedForm">
            <my-form ref="form" ></my-form>
        </l-dialog>
        
    </l-layout>
</template>

<script>
    import myForm from './form'
    const api = window.$api.erp.salesReceipt
    export default {
        components: {
            myForm
        },
        data() {
            return {
                lr_isPage:true,

                // query参数
                queryData:{
                    f_ApplyDate:'',
                    f_PurchaseNo:'',
                    f_Theme:'',
                    f_PurchaseType:'',
                    f_Appler:'',
                },

                queryItems:[
                    {label:'报价日期',prop:'f_ApplyDate',span:24},
                    {label:'单据编码',prop:'f_PurchaseNo'},
                    {label:'主题',prop:'f_Theme'},
                    {label:'报价类别',prop:'f_PurchaseType'},
                    {label:'报价人',prop:'f_Appler'},
                ],

                // 表格参数
                tableLoading: false,
                tableData:[],
                tableTotal:0,
                tableCurrentPage:1,
                tablePageSize:50,
                columns: [
                    {label:'单据编码',prop:'f_PurchaseNo',minWidth:120,align:'left'},
                    {label:'报价日期',prop:'f_ApplyDate',width:160,align:'left',dataType:'datetime'},
                    {label:'主题',prop:'f_Theme',minWidth:120,align:'left'},
                    {label:'报价类别',prop:'f_PurchaseType',minWidth:120,align:'left',dataType:'mydata',options:[ {"value":"2","label":"新闻类"},{"value":"3","label":"产品类"},{"value":"4","label":"信息类"}]},
                    {label:'报价人',prop:'f_Appler',minWidth:120,align:'left',dataType:'user'},
                    {label:'报价单位',prop:'f_Department',minWidth:120,align:'left',dataType:'company'},
                    {label:'支付方式',prop:'f_PaymentType',minWidth:120,align:'left',dataType:'mydata',options:[{"value":"0","label":"现金"},{"value":"1","label":"票汇"},{"label":"信汇","value":"2"},{"label":"电汇","value":"3"},{"label":"承兑","value":"4"},{"label":"信用证","value":"5"}]},
                    {label:'总价',prop:'f_Total',minWidth:120,align:'left'},
                    {label:'出库日期',prop:'f_DeliveryDate',width:160,align:'left',dataType:'datetime'},
                    {label:'点收人',prop:'f_PurchaseWarehousinger',minWidth:120,align:'left'},
                    {label:'点收日期',prop:'f_PurchaseWarehousingDate',width:160,align:'left',dataType:'datetime'},
                    {label:'备注',prop:'f_Description',minWidth:120,align:'left'},
                ],
                tableBtns:[
                    {prop:'Edit',label:'Edit',width:40},
                    {prop:'Delete',label:'Delete',width:40},
                ],

                // 表单参数
                formVisible:false,
                formTitle:'',
                formEditRow:null,
                formEdit:false,
            };
        },
        computed: {
            

            f_PurchaseTypeOptions(){
                return [{"value":"","label":"==please select=="},{"value":"2","label":"新闻类"},{"value":"3","label":"产品类"},{"label":"信息类","value":4}]
            },
            f_PaymentTypeOptions(){
                return [{"value":"-1","label":"==please select=="},{"value":"0","label":"现金"},{"value":"1","label":"票汇"},{"label":"信汇","value":"2"},{"label":"电汇","value":"3"},{"label":"承兑","value":"4"},{"label":"信用证","value":"5"}]
            },

        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.loadTableData()
            },
            
            handleSearch(){
                this.loadTableData()
            },
            turnTablePage({rows}){
                this.tablePageSize = rows
                this.loadTableData(true)
            },
            async loadTableData(isNotFirst){
                if(!isNotFirst){
                    this.tableCurrentPage = 1
                }
                this.tableLoading = true
                let queryData = this.$deepClone(this.queryData)
                if(!this.$validatenull(queryData.f_ApplyDate)){
                    queryData.f_ApplyDate_end = queryData.f_ApplyDate.split(' - ')[1]
                    queryData.f_ApplyDate = queryData.f_ApplyDate.split(' - ')[0]
                }

                queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 'F_Id'
                let data = await this.$awaitWraper(api.getPage(queryData))
                if(data != null){
                    this.tableData = data.rows
                    this.tableTotal = data.records
                }
                else{
                    this.tableData = []
                }
                this.tableLoading = false
            },

            handleAdd(){
                this.formEdit = false
                this.handleShowForm()
            },
            handleEdit($index,row){
                this.formEdit = true
                this.formEditRow = row
                this.handleShowForm()
            },
            handleDelete($index,row){
                this.$confirm(this.$t('This operation will permanently delete the data. Do you want to continue?'), this.$t('Tips'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
                }).then(async () => {
                    this.tableData.splice($index,1);
                    this.tableTotal--;
                    await api.remove(row.f_Id)
                    this.$message({
                        type: 'success',
                        message: this.$t('Delete  success')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$t('Delete has been canceled!')
                    })
                })
            },

            async handleSave(showLoading, hideLoading) {
                if (await this.$refs.form.validateForm()) {
                    showLoading()
                    const postData = this.$refs.form.getForm()
                    let res = ''
                    if(this.formEdit){// Edit
                        res = await this.$awaitWraper(api.update(this.formEditRow.f_Id,postData))
                    }
                    else{// Add
                        res = await this.$awaitWraper(api.add(postData))
                    }
                    if(res){
                        this.$message({
                            type: 'success',
                            message: this.$t('save success!')
                        })
                        this.loadTableData()
                        this.formVisible = false
                    }

                    hideLoading()
                }
            },

            handleShowForm(text) {
                this.formTitle = text;
                this.formVisible = true;
            },
            async handleOpenedForm(showLoading, hideLoading) {
                if (this.formEdit) {
                    showLoading('Loading data...')
                    let data = await this.$awaitWraper(api.get(this.formEditRow.f_Id))
                    if(data){
                        this.$refs.form.setForm(data)
                    }

                    hideLoading()
                }
            },
            handleCloseForm() {
                this.$refs.form.resetForm();
            }
        }
    }
</script>
